@mixin transition($attr,$time) {
  -webkit-transition: $attr $time ;
  -moz-transition: $attr $time ;
  -ms-transition: $attr $time ;
  -o-transition: $attr $time ;
  transition: $attr $time ;
}
@mixin transitionType($attr,$time,$type) {
  -webkit-transition: $attr $time $type 0s;
  -moz-transition: $attr $time $type 0s;
  -ms-transition: $attr $time $type 0s;
  -o-transition: $attr $time $type 0s;
  transition: $attr $time $type 0s;
}
@mixin rotate($num) {
  -webkit-transform: rotate($num);
  -moz-transform: rotate($num);
  -ms-transform: rotate($num);
  -o-transform: rotate($num);
  transform: rotate($num);
}
@mixin scale($x,$y) {
  -webkit-transform: scale($x,$y);
  -moz-transform: scale($x,$y);
  -ms-transform: scale($x,$y);
  -o-transform: scale($x,$y);
  transform: scale($x,$y);

}
@mixin scrollBar(){
  &::-webkit-scrollbar {
    width: 2px;
  }
  /* Track */
  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;

  }
  &::-webkit-scrollbar-track-piece{
    width: 1px;
  }
  /* Handle */
  &::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(0,0,0,0.1);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  }
  &::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(0,0,0,0.2);
  }
}
@mixin scrollBarNone(){
  &::-webkit-scrollbar {
    width: 2px;
  }
  /* Track */
  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;

  }
  &::-webkit-scrollbar-track-piece{
    width: 1px;
  }
  /* Handle */
  &::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(0,0,0,0.1);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  }
  &::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(0,0,0,0.2);
  }
}

@mixin gradient($s,$e){
  background: -moz-linear-gradient(top, $s 0%, $e 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$s), color-stop(100%,$e));
  background: -webkit-linear-gradient(top, $s 0%,$e 100%);
  background: -o-linear-gradient(top, $s 0%,$e 100%);
  background: -ms-linear-gradient(top, $s 0%,$e 100%);
  background: linear-gradient(to bottom, $s 0%,$e 100%);
}

@mixin placeholder($color){
  ::-webkit-input-placeholder { color:$color; }
  ::-moz-placeholder { color:$color; } /* firefox 19+ */
  :-ms-input-placeholder { color:$color; } /* ie */
  input:-moz-placeholder { color:$color; }
}

@keyframes sildeIn{
  from {transform: translateX(-100%)}
  to {transform: translateX(0%)}
}

@-webkit-keyframes move_wave {
  0% {-webkit-transform: translateX(0)}
  50%{-webkit-transform: translateX(-25%) }
  100%{-webkit-transform: translateX(-50%) }
}
    
@keyframes move_wave {
  0%{transform: translateX(0)}
  50%{transform: translateX(-25%) }
  100%{transform: translateX(-50%) }
}










